<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微服务架构中的跨域解决方案</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
        }
        .serif-font {
            font-family: 'Noto Serif SC', serif;
        }
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .code-block {
            background: #1e293b;
            border-radius: 12px;
            overflow: hidden;
        }
        .code-header {
            background: #334155;
            padding: 8px 16px;
            font-size: 14px;
            color: #94a3b8;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        pre {
            margin: 0;
            padding: 20px;
            overflow-x: auto;
        }
        pre code {
            color: #e2e8f0;
            font-size: 14px;
            line-height: 1.6;
        }
        .section-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 50%;
            font-weight: 700;
            margin-right: 12px;
        }
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 40px 0;
        }
        .highlight-box {
            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
            border-left: 4px solid #667eea;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
        }
        .icon-feature {
            transition: all 0.3s ease;
        }
        .icon-feature:hover i {
            transform: scale(1.2);
            color: #667eea;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="relative overflow-hidden bg-gradient-to-br from-purple-900 via-purple-800 to-indigo-900 text-white">
        <div class="absolute inset-0 bg-black opacity-20"></div>
        <div class="relative container mx-auto px-6 py-24">
            <div class="max-w-4xl mx-auto text-center">
                <h1 class="text-5xl md:text-6xl font-bold mb-6 serif-font">
                    微服务架构中的
                    <span class="block mt-2 gradient-text bg-gradient-to-r from-yellow-300 to-pink-300">跨域解决方案</span>
                </h1>
                <p class="text-xl md:text-2xl text-gray-200 leading-relaxed">
                    深入探索微服务架构下的跨域挑战与解决策略，掌握现代化的跨域处理技术
                </p>
                <div class="mt-10 flex justify-center gap-8">
                    <div class="text-center">
                        <i class="fas fa-network-wired text-4xl mb-2"></i>
                        <p class="text-sm">分布式架构</p>
                    </div>
                    <div class="text-center">
                        <i class="fas fa-shield-alt text-4xl mb-2"></i>
                        <p class="text-sm">安全可靠</p>
                    </div>
                    <div class="text-center">
                        <i class="fas fa-rocket text-4xl mb-2"></i>
                        <p class="text-sm">高性能方案</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0V120Z" fill="#f9fafb"/>
            </svg>
        </div>
    </section>

    <!-- Introduction -->
    <section class="container mx-auto px-6 py-16">
        <div class="max-w-4xl mx-auto">
            <div class="highlight-box">
                <p class="text-lg leading-relaxed text-gray-700">
                    <i class="fas fa-info-circle text-purple-600 mr-2"></i>
                    在微服务架构中，跨域问题依然是一个重要的考虑点。不同的微服务可能部署在不同的域名或端口下，这就可能涉及到跨域问题。解决跨域问题的方法与单体应用中类似，但在微服务架构中，通常需要考虑更加复杂的场景。
                </p>
            </div>
        </div>
    </section>

    <!-- Architecture Diagram -->
    <section class="container mx-auto px-6 pb-16">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">微服务跨域架构图</h2>
            <div class="bg-white rounded-xl shadow-lg p-8">
                <div class="mermaid">
                    graph TB
                        subgraph "前端应用"
                            A[Web应用<br/>frontend.example.com]
                        end
                        
                        subgraph "API网关层"
                            B[API Gateway<br/>api.example.com]
                        end
                        
                        subgraph "微服务集群"
                            C[用户服务<br/>:8081]
                            D[订单服务<br/>:8082]
                            E[产品服务<br/>:8083]
                        end
                        
                        A -->|跨域请求| B
                        B -->|内部调用| C
                        B -->|内部调用| D
                        B -->|内部调用| E
                        
                        style A fill:#fef3c7,stroke:#f59e0b,stroke-width:2px
                        style B fill:#ddd6fe,stroke:#8b5cf6,stroke-width:2px
                        style C fill:#d1fae5,stroke:#10b981,stroke-width:2px
                        style D fill:#d1fae5,stroke:#10b981,stroke-width:2px
                        style E fill:#d1fae5,stroke:#10b981,stroke-width:2px
                </div>
            </div>
        </div>
    </section>

    <!-- Solutions -->
    <section class="container mx-auto px-6 py-16">
        <div class="max-w-6xl mx-auto">
            <!-- Solution 1: CORS -->
            <div class="mb-16">
                <h2 class="text-3xl font-bold mb-8 flex items-center">
                    <span class="section-number">1</span>
                    使用 CORS（跨源资源共享）
                </h2>
                <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
                    <p class="text-lg text-gray-700 mb-6">
                        <strong>CORS</strong> 是解决跨域问题的主要方法。它通过设置 HTTP 头部来允许特定的域访问资源。
                    </p>
                    
                    <h3 class="text-xl font-semibold mb-4 text-gray-800">
                        <i class="fas fa-cog text-purple-600 mr-2"></i>
                        配置 CORS 头部
                    </h3>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="code-block">
                            <div class="code-header">
                                <i class="fab fa-java"></i>
                                <span>Spring Boot 示例</span>
                            </div>
                            <pre><code>@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://frontend.example.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}</code></pre>
                        </div>
                        
                        <div class="code-block">
                            <div class="code-header">
                                <i class="fab fa-node-js"></i>
                                <span>Express.js 示例</span>
                            </div>
                            <pre><code>const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
    origin: 'http://frontend.example.com',
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    allowedHeaders: '*',
    credentials: true
}));</code></pre>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Solution 2: API Gateway -->
            <div class="mb-16">
                <h2 class="text-3xl font-bold mb-8 flex items-center">
                    <span class="section-number">2</span>
                    使用 API 网关
                </h2>
                <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
                    <p class="text-lg text-gray-700 mb-6">
                        <strong>API 网关</strong> 作为微服务架构的核心组件之一，可以集中管理跨域请求。通过在网关中配置 CORS，可以简化跨域问题的处理。
                    </p>
                    
                    <div class="code-block">
                        <div class="code-header">
                            <i class="fas fa-file-code"></i>
                            <span>Spring Cloud Gateway 配置</span>
                        </div>
                        <pre><code>spring:
  cloud:
    gateway:
      routes:
        - id: service_route
          uri: http://service.example.com
          predicates:
            - Path=/api/**
          filters:
            - name: CORS
              args:
                allowedOrigins: "http://frontend.example.com"
                allowedMethods: "GET, POST, PUT, DELETE"
                allowedHeaders: "*"
                allowCredentials: true</code></pre>
                    </div>
                </div>
            </div>

            <!-- Solution 3: Reverse Proxy -->
            <div class="mb-16">
                <h2 class="text-3xl font-bold mb-8 flex items-center">
                    <span class="section-number">3</span>
                    使用反向代理
                </h2>
                <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
                    <p class="text-lg text-gray-700 mb-6">
                        <strong>反向代理</strong> 可以将请求从一个域代理到另一个域，这样就可以在同一个域名下处理请求，从而避免跨域问题。Nginx 是常用的反向代理服务器。
                    </p>
                    
                    <div class="code-block">
                        <div class="code-header">
                            <i class="fas fa-server"></i>
                            <span>Nginx 配置</span>
                        </div>
                        <pre><code>server {
    listen 80;
    server_name api.example.com;

    location / {
        proxy_pass http://service.example.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}</code></pre>
                    </div>
                </div>
            </div>

            <!-- Solution 4: JSONP -->
            <div class="mb-16">
                <h2 class="text-3xl font-bold mb-8 flex items-center">
                    <span class="section-number">4</span>
                    JSONP（JSON with Padding）
                </h2>
                <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
                    <p class="text-lg text-gray-700 mb-6">
                        <strong>JSONP</strong> 可以用来解决跨域问题，但它仅支持 GET 请求。它的使用在现代应用中逐渐减少，因为 CORS 是更为安全和灵活的解决方案。
                    </p>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="code-block">
                            <div class="code-header">
                                <i class="fab fa-js"></i>
                                <span>客户端示例</span>
                            </div>
                            <pre><code>function handleResponse(data) {
    console.log(data);
}

const script =